<template>
  <a-drawer
    v-if="visible"
    :append-to-body="true"
    :width="540"
    :visible="visible"
    @cancel="closeDrawer()"
    :closable="false"
    @ok="saveDelay()"
    ok-text="保存">
    <template #title>
      <EditableText :value="flowNodeConfig.name" @change="(v) => (flowNodeConfig.name = v)" />
    </template>
    <div>
      <div style="margin-bottom: 20px">
        <p class="item-desc">延时方式</p>
        <div class="main-content">
          <a-radio-group type="button" class="radio-group" v-model="flowNodeConfig.DelayConfig.type" >
            <a-radio value="FIXED">固定时长</a-radio>
            <a-radio value="AUTO">自动计算</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div v-if="flowNodeConfig.DelayConfig.type === 'FIXED'">
        <a-input-number v-model="flowNodeConfig.DelayConfig.time" :style="{width:'100px'}" placeholder="时间单位" :min="0" :max="10000">
        </a-input-number>
        <a-select slot="append" v-model="flowNodeConfig.DelayConfig.unit" :style="{width:'90px'}" placeholder="天">
            <a-option value="D">天</a-option>
            <a-option value="H">小时</a-option>
            <a-option value="M">分钟</a-option>
          </a-select>
        <!-- <el-input
          style="width: 180px"
          placeholder="时间单位"
          type="number"
          v-model="config.time"
        >

            <el-select
              style="width: 75px"
              v-model="config.unit"
              slot="append"
              placeholder="请选择"
            >
              <el-option label="天" value="D"></el-option>
              <el-option label="小时" value="H"></el-option>
              <el-option label="分钟" value="M"></el-option>
            </el-select>
          </el-input> -->
          <span class="item-desc"> 后进入下一步</span>
        </div>
        <div class="item-desc" v-else>
          <el-time-picker
            value-format="HH:mm:ss"
            style="width: 150px"
            v-model="flowNodeConfig.DelayConfig.dateTime"
            placeholder="任意时间点"
          ></el-time-picker>
          <span class="item-desc"> 后进入下一步</span>
        </div>
    </div>
  </a-drawer>
</template>

<script setup>
import { computed, onBeforeMount, onMounted, ref, toRaw, watch } from "vue";
import { useFlowStore } from "@/store/flowable/index";
import ArrayUtil from "@/components/flowable/flow/common/ArrayUtil";
import Snowflake from "@/components/flowable/flow/common/Snowflake";
import EditableText from "@/components/flowable/common/EditableText.vue";
import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
import { ASSIGNEE } from "@/components/flowable/flow/common/FlowConstant";
let flowStore = useFlowStore();
let { showDelayDrawer, setDelayConfig } = flowStore;
let isDelayDrawerOpened = computed(() => flowStore.isDelayDrawerOpened);
let delayConfig0 = computed(() => flowStore.delayConfig0);
let visible = computed({
  get: () => isDelayDrawerOpened.value,
  set: () => closeDrawer(),
});
let _uid = ref(0);
let flowNodeConfig = ref({

});
//切换延时方式
// const onDelayTypeChanged = (type) => {
//   if(type == "FIXED"){
//     flowNodeConfig.value.DelayConfig.dateTime = "";
//   }else{
//     flowNodeConfig.value.DelayConfig.time = 0;
//     flowNodeConfig.value.DelayConfig.unit = "D";
//   }
// };
const closeDrawer = () => {
  showDelayDrawer(false);
};
watch(delayConfig0, (val) => {
  flowNodeConfig.value = val.value;
  _uid = val.id;
});

const saveDelay = () => {
  setDelayConfig({
    value: toRaw(flowNodeConfig.value),
    flag: true,
    id: _uid,
  });
  closeDrawer();
};
</script>

<style scoped></style>
